<template>
  <view class="dian_view" :class="deep==0?'m20':''" :id="'chain'+treeData.id">
    <view class="flex">
      <view :class="{
        parentLevel: Array.isArray(treeData.children) && treeData.children.length, 
        extend: Array.isArray(treeData.children) && treeData.children.length && treeData.extend,
        extend_title_view: treeData.isTitle,
        }"
      >
			<!--  -->
			
<!-- 			:style="treeData.isTitle?'':'background:' + treeData.bgColor+';' +
			       (treeData.borderColor?'border:2px solid ' + treeData.borderColor:'')" -->
        <view :class="{
                node: true, 
                hasMate: treeData.mate,
                activeview: activeItem.id==treeData.id,
                extend_title: treeData.isTitle,
              }"  
              class="flex n_border"
              @click="changeActive(treeData)">

          <view class="extend_handle" :class="treeData.extend?'close':'open'" v-if="treeData.isTitle||(Array.isArray(treeData.children) && treeData.children.length)" 
            @click.stop="()=>changeActive(treeData)"></view>
          <!-- <view v-show="treeData.isTitle" class="extend_title" :class="treeData.extend?'close':'open'" 
            @click="()=>toggleExtend(treeData)"></view> -->

          <view :class="treeData.isTitle?'item_title':'item_name'">{{treeData.name}}</view>

        </view>
      </view>
    </view>
    <view class="extend" v-if="Array.isArray(treeData.children) && treeData.children.length&&treeData.extend" :class="[treeData.hasGchild?'':'flex_w none_line']">
      <view v-for="(children, index) in treeData.children" :key="index"  class="childLevel">
        <treeChart :deep='deep+1' :json="children" :activeItem="activeItem" @click-node="$emit('click-node', $event)" @changeActive="changeActive"/>
      </view>
    </view>
  </view>
</template>

<script>
import treeChart from '@/components/treeChart.vue'
export default {
  name: "treeChart",
  props: ["json",'activeItem','deep'],
  data() {
    return {
      treeData: {}
    }
  },
	components:{
		treeChart
	},
  watch: {
    json: {
      handler: function(Props){
        // let color = ['#EC9D7C','#144EB2','#0000']
        // let color1 = ['#EC9D7C','#144EB2','#144EB2']
        let extendKey = (item,i) => {
          // item.extend = (item.extend===void 0 ? true: !!item.extend);
          // item.bgColor = item.bgColor || color[i]
          // item.borderColor = item.borderColor||color1[i]
          // if(Array.isArray(item.children)){
          //   let hasGchild = false
          //   item.children.forEach(c => {
          //     if(Array.isArray(c.children)&&c.children.length>0){
          //       hasGchild = true
          //     }
          //     extendKey(c,i+1)
          //   })
          //   item.hasGchild = hasGchild
          // }
          return item;
        }
        if(Props){
          this.treeData = extendKey(Props,0);
        }
      },
      immediate: true
    }
  },
  methods: {
    toggleExtend(treeData){
      treeData.extend = !treeData.extend;
      this.$forceUpdate();
    },
    changeActive(item){
			item.extend = true
      this.$emit('changeActive',item)
    }
  }
}
</script>

<style scoped lang="scss">
.n_border{
	border:2rpx solid #0000;
}
.dian_view{
  margin: 5rpx 0;
}
.m20{
	margin:10rpx 0;
}

.none_line{
  // margin: 0 20rpx 40rpx 60rpx !important;
	margin: 0 10rpx 20rpx 50rpx !important;
  .childLevel{
    margin: 0 6rpx 0 0 !important;
    min-height: 60rpx;
    &::after,&::before{
      width: 0 !important;
      height: 0 !important;
      border: none !important;
    }
    &:first-child::before{
      content: "";
      position: absolute;
      left:-24rpx;
      top: -6rpx;
      height:36rpx !important;
      width: 26rpx !important;
      border-left:1rpx solid #e6e6e6 !important;
    }
    &:first-child::after{
      content: "";
      position: absolute;
      left:-24rpx;
      top: -6rpx;
      height:36rpx !important;
      width: 26rpx !important;
      border-bottom:1rpx solid #e6e6e6 !important;
    }
  }
}
.childLevel{
  margin: 0 0 0 48rpx;
  position: relative;
  &::before{
    content: "";
    position: absolute;
    left:-24rpx;
    top: -30rpx;
    height:56rpx;
    width: 26rpx;
    border-left:1rpx solid #e6e6e6;
  }
  &::after{
    content: "";
    position: absolute;
    left:-24rpx;
    top: -30rpx;
    height:56rpx;
    width: 26rpx;
    border-bottom:1rpx solid #e6e6e6;
  }
  &:not(:last-child)::before{
    height: calc(100% + 20rpx);
  }
  &:last-child::before{
    // top: -60rpx;
  }

}
.node{
  display: flex;
  align-items: center;
  // min-width: 200rpx;
  max-width: 300rpx;
  padding: 6rpx 10rpx;
  min-height: 40rpx;
  border-radius: 8rpx;
  color: #fff;
  position: relative;
  z-index: 10;
  cursor: pointer;
  .extend_handle{
    background: #FF5733;
    min-height: 26rpx;
    max-height: 26rpx;
    min-width: 26rpx;
    max-width: 26rpx;
    border-radius: 14rpx;
    cursor: pointer;
    position: relative;
    margin-right: 10rpx;
    z-index: 100;
    &.open::after{
      content: ' ';
      position: absolute;
      left: 4rpx;
      top: 12rpx;
      width: 18rpx;
      height: 2rpx;
      background: #fff;
    }
    &.open::before{
      content: ' ';
      position: absolute;
      left: 12rpx;
      top: 4rpx;
      height: 18rpx;
      width: 2rpx;
      background: #fff;
    }
    &.close::after{
      content: ' ';
      position: absolute;
      left: 4rpx;
      top: 12rpx;
      width: 18rpx;
      height: 2rpx;
      background: #fff;
    }
  }
}
.activeview{
	.extend_handle{
    background: #fff;
    &.open::after{
      background: #FF5733;
    }
    &.open::before{
      background: #FF5733;
    }
    &.close::after{
      background: #FF5733;
    }
  }
}

.extend_title_view{
  width: calc(100% - 20rpx);
  // background: #144EB2;
  border-radius: 12rpx;
}
// .extend_title{
//   background: #04AAD9;
//   height: 44rpx;
//   width: 10rpx;
//   cursor: pointer;
//   position: relative;
//   margin: 0rpx 20rpx 0 12rpx;
// }
.extend_title{
  width: calc(100% - 20rpx) !important;  
  max-width: calc(100% - 20rpx) !important;  
}
.item_title{
  font-size: 28rpx;
	font-weight: 600;
  color: #333;
}
.item_name{
  font-size: 24rpx;
  color: #333;
}

.activeview{
  background: #FF5733 !important;
  border-color: #FF5733 !important;
	color:#fff !important;
	.item_title{
		color:#fff !important;
	}
	.item_name{
		color:#fff !important;
	}
}
</style>